<!-- 左侧面板 -->
<template>
  <ModelTile class="hyqk" title="各行业情况">
    <div class="hyqk-content scrollbar">
      <ZTable :columns="columns" :data-source="aicInfos" size="small" :pagination="false">
        <template #bodyCell="{ column, text }">
          <div class="tz" v-if="column.dataIndex == 'invCrColor'">
            <img :src="getImage(text)" :alt="text" />
          </div>
          <div class="tz" v-if="column.dataIndex == 'reserveRateColor'">
            <img :src="getImage(text)" :alt="text" />
          </div>
        </template>
      </ZTable>
    </div>
  </ModelTile>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'hyqk',
  components: {
    ModelTile,
    ZTable
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const router = useRouter()
    // 表头
    const columns: Column[] = [
      {
        dataIndex: 'aicName',
        title: '部门',
        width: '35%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'invCrColor',
        title: '投资完成率',
        width: '45%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'reserveRateColor',
        title: '储备度',
        width: '20%',
        ellipsis: true,
        align: 'left'
      }
    ]
    const listData = ref([
      { aicName: '发改委1', invCrColor: 'RED', reserveRateColor: 'RED' },
      { aicName: '发改委2', invCrColor: 'YELLOW', reserveRateColor: 'YELLOW' },
      { aicName: '发改委3', invCrColor: 'RED', reserveRateColor: 'YELLOW' },
      { aicName: '发改委4', invCrColor: 'YELLOW', reserveRateColor: 'YELLOW' },
      { aicName: '发改委5', invCrColor: 'YELLOW', reserveRateColor: 'RED' },
      { aicName: '发改委6', invCrColor: 'RED', reserveRateColor: 'GREEN' },
      { aicName: '发改委7', invCrColor: 'RED', reserveRateColor: 'GREEN' },
      { aicName: '发改委8', invCrColor: 'GREEN', reserveRateColor: 'GREEN' },
      { aicName: '发改委9', invCrColor: 'YELLOW', reserveRateColor: 'RED' }
    ])
    // 通过计算属性实时获取父级传递的 列表数据
    const aicInfos = computed(() => props.statAllData?.aicInfos || listData.value)
    // 获取icon
    function getImage(name: string) {
      return new URL(`/src/assets/images/pageHome/${name}.png`, import.meta.url).href
    }
    return {
      columns,
      aicInfos,

      getImage
    }
  }
})
</script>
<style lang="scss" scoped>
.hyqk {
  color: #fff;
  margin-bottom: 40vh * $Bh;

  :deep(.content) {
    padding: 0;
    border-radius: 12vh * $Bh;
    height: 768vh * $Bh;
    padding: 26vh * $h 0 8vh * $h 0;
  }

  :deep(.z-table) {
    .ant-table {
      .ant-table-container {
        table {
          .ant-table-thead {
            .ant-table-cell {
              padding: 25vh * $h 0;
            }
          }
        }
      }
    }
  }

  .hyqk-content {
    padding: 0 34vw * $w 0 30vw * $w;
    height: 100%;

    .tz {
      display: flex;
      align-items: center;
      height: 30vh * $h;
      padding-bottom: 3vh * $h;

      img {
        width: 25vh * $h;
        height: 25vh * $h;
      }
    }
  }
}
</style>
